<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/projectProduction' }">案例制作</el-breadcrumb-item>
                <el-breadcrumb-item>{{projectBreadCrumbBack}} - 制作案例简介</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back>  -->
        </div>
        <div class="content-box">
            <div class="production-tab">
                <ul>
                    <li :class="{ active: productionTabActiveIndex == 1}" @click="productionTab(1)">
                        <span>业务说明</span>
                    </li>
                    <li :class="{ active: productionTabActiveIndex == 2}" @click="productionTab(2)">
                        <span>数据及技术</span>
                    </li>
                    <li :class="{ active: productionTabActiveIndex == 3}" @click="productionTab(3)">
                        <span>案例设计</span>
                    </li>
                    <li :class="{ active: productionTabActiveIndex == 4}" @click="productionTab(4)">
                        <span>分工及结果展示</span>
                    </li>
                </ul>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 1" style="margin-top: 30px;">
                <vue-wangeditor id="business-description-editor" :editorMenus="editorMenus" :content="businessDescriptionEditorContent"></vue-wangeditor>
                <!-- <vue-wangeditor id="editor" v-model="businessDescriptionEditorContent"></vue-wangeditor> -->
                <!-- <wysiwyg v-model="myHTML" />
                <wysiwyg v-model="myHTML2" /> -->
                <!-- <trumbowyg v-model="content" :config="config" class="form-control" name="content"></trumbowyg> -->
                <!-- <vue-trumbowyg id="asdasd"></vue-trumbowyg> -->
                <!-- <div id="div1" class="toolbar">
                </div>
                <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
                <div id="div2" class="text">
                    <p>请输入内容</p>
                </div> -->
                <!-- <div id="business-description-editor">
                    <div id="business-description-editor-menu" style="line-height:24px;"></div>
                    <div id="business-description-editor-editor" style="width:auto; height:800px;"></div>
                    <input type="hidden" v-model="businessDescriptionEditorContent" id="business-description-editor-text" />
                </div> -->
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 2" style="margin-top: 10px;">
                <div class="content-title">
                    <i class="iconfont icon-shujuyuan"></i>数据样例
                </div>
                <div class="production-project-data">
                    <div class="production-project-data-item" v-for="(item, index) in dataIntroduction" :key="index">
                        <div class="production-project-data-item-name">
                            <span>数据源名称</span>
                            <el-input maxlength="50" v-model="item.dataName" @input="dataNameInput(item)"></el-input>
                            <em>{{item.dataNameSize}}/50</em>
                        </div>
                        <div class="production-project-data-item-content">
                            <span>数据来源</span>
                            <div class="item-textarea item-textarea-content">
                                <textarea maxlength="500" v-model="item.dataContent" @input="dataContentInput(item)"></textarea>
                            </div>
                            <em>{{item.dataContentSize}}/500</em>
                            <span style="margin-top:20px;">数据样例</span>
                            <div class="item-textarea">
                                <textarea maxlength="1000" v-model="item.dataProject" @input="dataProjectInput(item)"></textarea>
                            </div>
                            <em>{{item.dataProjectSize}}/1000</em>
                        </div>
                        <div class="production-project-data-item-delete" @click.prevent="dataRemoveFn(item)">x</div>
                    </div>
                    <div class="production-project-data-item" @click="dataAddFn">
                        <div class="production-project-data-item-add">+</div>
                    </div>
                </div>
                <div class="content-title">
                    <i class="iconfont icon-shuju"></i>技术选型
                </div>
                <vue-wangeditor id="data-selection-editor" :editorMenus="editorMenus" :content="dataSelectionEtiorContent" height="220" style="margin-top:40px;"></vue-wangeditor>
                <!-- <div id="data-selection-editor" style="margin-top:40px;">
                    <div id="data-selection-editor-menu" style="line-height:24px;"></div>
                    <div id="data-selection-editor-editor" style="width:auto; height:220px;"></div>
                    <input type="hidden" v-model="dataSelectionEtiorContent" id="data-selection-editor-text" />
                </div> -->
                <div class="content-title">
                    <i class="iconfont icon-liuchengsheji"></i>技术结构图
                </div>
                <div class="technology-upload-box">
                    <div class="upload-show"
                        v-loading="structureLoading"
                        element-loading-text="技术结构图上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        >
                        <img v-if="structureUrl != ''" :src="structureUrl" @click="openBox(structureUrl)" />
                        <i v-else class="iconfont icon-tupian3"></i>
                        <div class="delete-btn" v-if="structureUrl != ''" @click="structureDelete">x</div>
                    </div>
                    <div class="upload-btn-box">
                        <button>点击上传<input id="structure" type="file" multiple="multiple" auto-complete="off" title="选择文件" @change="upLoadImg"></button>
                        <p>仅能上传图片格式文件。</p>
                    </div>
                </div>
                <div class="content-title">
                    <i class="iconfont icon-jishuzhichi"></i>技术应用
                </div>
                <div class="production-project-application">
                    <div style="width:800px; height:40px; margin-bottom: 10px;"
                        v-for="(domain, index) in appDomains" :key="index">
                        <el-select
                            v-model="domain.appNameValue"
                            placeholder="请选择技术应用"
                            value-key="value"
                            style="float:left; width:170px;" @change="appNameChange(domain)">
                            <el-option
                            v-for="item in domain.appNameStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select
                            v-model="domain.appNamePointValue"
                            placeholder="请选择技术点"
                            multiple
                            collapse-tags
                            value-key="value"
                            style="float:left; min-width:240px;">
                            <el-option
                            v-for="(item, key) in domain.appNamePointStatus"
                            :key="key"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button v-if="appDomains.length != 1" style="float:left;" @click.prevent="appRemoveDomains(domain)">删除</el-button>
                    </div>
                    <div class="production-project-application-add"  @click="appAddDomains">+</div>
                </div>
                <div class="technology-upload-box">
                    <div class="upload-show"
                        v-loading="appLoading"
                        element-loading-text="技术应用图上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        >
                        <img v-if="appUrl != ''" :src="appUrl" @click="openBox(appUrl)" />
                        <i v-else class="iconfont icon-tupian3"></i>
                        <div class="delete-btn" v-if="appUrl != ''" @click="appDelete">x</div>
                    </div>
                    <div class="upload-btn-box">
                        <button>点击上传<input id="appUrl" type="file" multiple="multiple" auto-complete="off" title="选择文件" @change="appUpLoadImg"></button>
                        <p>仅能上传图片格式文件。</p>
                    </div>
                </div>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 3" style="margin-top: 10px;">
                <div class="content-title">
                    <i class="iconfont icon-shuju"></i>模型介绍
                </div>
                <vue-wangeditor id="model-introduction-editor" :editorMenus="editorMenus" :content="modelIntroductionrContent" height="220" style="margin-top:40px;"></vue-wangeditor>
                <!-- <div id="model-introduction-editor" style="margin-top:40px;">
                    <div id="model-introduction-editor-menu" style="line-height:24px;"></div>
                    <div id="model-introduction-editor-editor" style="width:auto; height:220px;"></div>
                    <input type="hidden" v-model="modelIntroductionrContent" id="model-introduction-editor-text" />
                </div> -->
                <div class="content-title">
                    <i class="iconfont icon-liuchengsheji"></i>案例步骤
                </div>
                <div class="production-project-flow">
                    <div class="production-project-flow-title">
                        流程展示 >
                    </div>
                    <div class="production-project-flow-content">
                        <div class="production-project-flow-box" :style="{  minWidth: (flowDomains.length * 220) + 'px'}">
                            <div class="production-project-flow-step-box">
                                <div class="step-item" v-for="(item, index) in flowDomains" :key="index">
                                    <el-input type="textarea" maxlength="50" @input="flowInput(item)" v-model="item.flowTextarea"></el-input>
                                    <div class="text-delete" v-if="flowDomains.length > 1">
                                        <i class="iconfont icon-jianhao" @click.prevent="flowRemoveDomains(item)"></i>
                                        <em>{{item.flowTextareaNumber}}/50</em>
                                    </div>
                                </div>
                            </div>
                            <div class="production-project-flow-step">
                                <div class="step-item" v-for="(item, index) in flowDomains" :key="index">
                                    <span class="item-point"></span>
                                    <span class="item-line"></span>
                                    <div class="item-add" v-if="(flowDomains.length-1) == index">
                                        <i class="iconfont icon-add" @click="flowAddDomains"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-title">
                    <i class="iconfont icon-liuchengsheji"></i>流程设计
                </div>
                <!-- <div id="flow-design-editor" style="margin-top:40px;">
                    <div id="flow-design-editor-menu" style="line-height:24px;"></div>
                    <div id="flow-design-editor-editor" style="width:auto; height:220px;"></div>
                    <input type="hidden" v-model="flowDesignEtiorContent" id="flow-design-editor-text" />
                </div> -->
                <vue-wangeditor id="flow-design-editor" :editorMenus="editorMenus" :content="flowDesignEtiorContent" height="220" style="margin-top:40px;"></vue-wangeditor>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 4" style="margin-top: 10px;">
                <div class="content-title">
                    <i class="iconfont icon-jiaose"></i>角色工期
                </div>
                <vue-wangeditor id="character-duration-editor" :editorMenus="editorMenus" :content="characterDurationEtiorContent" height="220" style="margin-top:40px;"></vue-wangeditor>
                <!-- <div id="character-duration-editor" style="margin-top:40px;">
                    <div id="character-duration-editor-menu" style="line-height:24px;"></div>
                    <div id="character-duration-editor-editor" style="width:auto; height:220px;"></div>
                    <input type="hidden" v-model="characterDurationEtiorContent" id="character-duration-editor-text" />
                </div> -->
                <div class="content-title">
                    <i class="iconfont icon-zhanshi"></i>结果展示图
                </div>
                <div class="production-project-show">
                    <el-upload
                        class="upload-demo"
                        action="123"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload"
                        :file-list="fileList"
                        :multiple="true"
                        list-type="picture"
                        :on-change='changeUpload'>
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">仅能上传图片格式文件。</div>
                    </el-upload>
                </div>
                <!-- <div class="business-editor">
                    <div class="editor-box">
                        <div class="step-btn-box">
                            <el-button type="primary" @click="goStep"><i class="iconfont icon-SOPliuchengshuoming"></i>制作步骤/环境</el-button>
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="business-editor">
               <div class="editor-box">
                    <div class="editor-btn-box">
                        <el-button type="primary" @click.prevent="saveFn">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="production-tip-btn" v-if="productionTabActiveIndex == 1" :class="{ 'tip-hide': productionTipStatus }">
            <div class="start-experiment-zoom" @click="startExperimentZomm">
                <img src="./../../assets/images/zoom_icon.png" />
            </div>
            <div class="start-experiment-btn" @click="startExperiment">开始制作步骤</div>
        </div>
        <div class="start-experiment-zoom-btn" v-if="productionTabActiveIndex == 1" @click="startExperimentZomm" :class="{ 'tip-hide': productionTipStatus }">
            <img src="./../../assets/images/production-tip-btn2.png" />
        </div>
        <el-dialog class="add-virtual-dialog" title="虚机配置" :visible.sync="dialogFormVisible" width='500px'>
            <el-form :model="form" :rules="rules" ref="form" label-width="130px">
                <el-form-item label="类型 :">
                    <el-radio-group v-model="form.radioType" @change="initStepSelect">
                        <el-radio :label="0">单节点</el-radio>
                        <el-radio :label="1">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="来源 :" v-if="form.radioType == 0">
                    <el-radio-group v-model="form.radioSource" @change="initStepSelect">
                        <el-radio :label="1">系统预置</el-radio>
                        <el-radio :label="0">教师制作</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div>
                    <el-form-item v-if="form.radioType == 0" label="镜像名称 :" prop="mirrorValue">
                        <el-select
                            v-model="form.mirrorValue"
                            placeholder="请选择镜像"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.mirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.radioType == 0" label="虚机配置 :" prop="virtualValue">
                        <el-select
                            v-model="form.virtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.virtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item v-if="form.radioType == 1" label="从节点数 :">
                    <div class="virtual-step">
                        <ul>
                            <li v-for="(item, index) in form.virtualStepList" @click="addClass(((index+1)*2))" :class="{ active:((index+1)*2) == form.virtualStepCurrent}">{{item.value}}</li>
                        </ul>
                    </div>
                </el-form-item>
                <div class="item-node" v-if="form.radioType == 1">
                    <el-form-item
                        style="width:270px; float:left;"
                        label="主节点(master):"
                        prop="masterMirrorValue"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.masterMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.masterMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        style="width:150px; float:left; margin-left:10px;"
                        prop="masterVirtualValue"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        label-width="0"
                        >
                        <el-select
                            v-model="form.masterVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.masterVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="item-node" v-if="form.radioType == 1">
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave1):"
                        :prop="'formDomains.' + 0 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[0].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[0].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 0 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[0].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[0].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave2):"
                        :prop="'formDomains.' + 1 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[1].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[1].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 1 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[1].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[1].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave3):"
                        :prop="'formDomains.' + 2 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[2].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[2].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 2 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[2].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[2].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave4):"
                        :prop="'formDomains.' + 3 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[3].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[3].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 3 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[3].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[3].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave5):"
                        :prop="'formDomains.' + 4 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[4].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[4].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 4 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[4].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[4].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave6):"
                        :prop="'formDomains.' + 5 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[5].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[5].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 5 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[5].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[5].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog class="add-project-target-dialog" title="案例目标" :visible.sync="projectTargetVisible" width='500px'>
            <el-input type="textarea" maxlength="500" @input="addTargetInput" v-model="addTargetValue"></el-input>
            <em>{{addTargetNumber}}/500</em>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="addTargetSave">保存</el-button>
            </div>
        </el-dialog>
        <big-img :close="closeBox" :imgsource="currentPic" v-if="lightBoxToggle"></big-img>
    </div>
</template>

<script>
    import BigImg from '@/components/BigImg.vue'
    import { mapState } from 'vuex'
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import vueWangeditor from '@/components/vueWangeditor.vue'
    // import E from 'wangeditor'

    export default {
        components: {
            BigImg,
            // vueWangeditor,
            vueWangeditor,
            BreadCrumbBack,
            // Trumbowyg,
            // VueTrumbowyg
        },
        data () {
            return {
                text: '',
                projectId: '',
                //面包屑name
                projectBreadCrumbBack: '',
                //判断是否有步骤弹窗
                vmTemplateFlag: '',
                lightBoxToggle: false,
                currentPic: {
                    imgUrl: ''
                },
                //章節ID
                presetChapterId: '',
                //tabindex
                productionTabActiveIndex: 1,
                //业务说明editor
                businessEditor: null,
                businessDescriptionEditorContent: '',
                editorMenus: [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                    'code',  // 插入代码
                ],
                //数据选型editor
                dataSelectionEditor: null,
                dataSelectionEtiorContent: '',
                //模块介绍editor
                modelIntroductionrEditor: null,
                modelIntroductionrContent: '',
                //流程设计editor
                flowDesignEditor: null,
                flowDesignEtiorContent: '',
                //角色工期editor
                characterDurationEtior: null,
                characterDurationEtiorContent: '',
                //结构图
                structureLoading: false,
                structureUrl: '',
                structureImgName: [],
                //应用图
                appLoading: false,
                appUrl: '',
                appImgName: [],
                //图片集合
                fileList: [],
                //数据源介绍
                dataIntroduction: [
                    {
                        dataName: '',
                        dataNameSize: 50,
                        dataContent: '',
                        dataContentSize: 500,
                        dataProject: '',
                        dataProjectSize: 1000
                    }
                ],
                //技术应用
                appDomains: [
                    {
                        appNameStatus: [],
                        appNameValue: '',
                        appNamePointStatus: [],
                        appNamePointValue: []
                    }
                ],
                //技术应用右侧select数据
                appDomainsSkillData: [],
                appDomainsData: [],
                //流程展示
                flowDomains: [
                    {
                        id: 0,
                        flowTextarea: '',
                        flowTextareaNumber: 50
                    }
                ],
                //步骤制作弹窗
                form: {
                    radioType: 0,
                    radioSource: 1,
                    mirrorStatus: [],
                    mirrorValue:'',
                    virtualStatus: [],
                    virtualValue: '',
                    virtualStepList: [
                        { value: 2 },
                        { value: 4 },
                        { value: 6 }
                    ],
                    virtualStepCurrent: 2,
                    masterMirrorStatus: [], //主节点
                    masterMirrorValue: '',
                    masterVirtualStatus: [],
                    masterVirtualValue: '',
                    formDomains: [
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        }
                    ]
                },
                dialogFormVisible: false,
                //表单验证
				rules: {
                    mirrorValue: [
                        { required: true, message: '请选择镜像', trigger: 'blur' }
                    ],
                    virtualValue: [
                        { required: true, message: '请选择虚机配置', trigger: 'blur' }
                    ]
                },
                //案例目标弹窗
                projectTargetVisible: false,
                //案例目标弹窗数据
                addTargetValue: '',
                addTargetNumber: 500,
                styleObject: {
                    width: 'auto',
                    height: '800px'
                },
                //开始试验按钮状态
                productionTipStatus: true
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            //章节ID
            this.presetChapterId = this.$store.state.chapterType
            this.projectBreadCrumbBack = this.$store.state.projectBreadCrumbBack
            this.init() //初始化
            this.selectInit()   //初始化技术应用列表
            // this.initStepSelect()   //初始化步骤弹窗列表
            this.initTarget()       //初始化案例目标弹窗

        },
        mounted () {
            // this.$nextTick(() => {
            //     this.businessEditor = new E('#business-description-editor-menu', '#business-description-editor-editor')
            //     this.businessEditor.customConfig.onchange = (html) => {
            //         this.businessDescriptionEditorContent = html
            //         console.log(this.businessDescriptionEditorContent)
            //     }
            //     this.businessEditor.customConfig.zIndex = 100
            //     this.businessEditor.customConfig.uploadImgShowBase64 = true
            //     this.businessEditor.customConfig.onchangeTimeout = 200
            //     // this.businessEditor.customConfig.menus = this.editorMenus
            //     this.businessEditor.create()     // 创建富文本实例
            //     this.businessEditor.txt.html(this.businessDescriptionEditorContent)
            // })
        },
        computed:{
			...mapState(['chapterType'])
        },
        methods: {
            // businessCatchData(){
            //    return this.businessDescriptionEditorContent     //在这里接受子组件传过来的参数，赋值给data里的参数
            // },
            // dataSelectionCatchData(value){
            //     this.dataSelectionEtiorContent=value      //在这里接受子组件传过来的参数，赋值给data里的参数
            // },
            // flowDesignCatchData (value){
            //     this.flowDesignEtiorContent=value      //在这里接受子组件传过来的参数，赋值给data里的参数
            // },
            // modelIntroductionCatchData (value){
            //     this.modelIntroductionrContent=value      //在这里接受子组件传过来的参数，赋值给data里的参数
            // },
            // characterDurationCatchData (value){
            //     this.characterDurationEtiorContent=value      //在这里接受子组件传过来的参数，赋值给data里的参数
            // },
            init() {
                let self = this
                const loading = this.$loading({
                    lock: true,
                    text: '数据加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.get('/dataplatform/description/detail?itemId='+self.projectId+'&descriptionType='+self.productionTabActiveIndex).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //章节ID
                        self.vmTemplateFlag = res.data.vmTemplateFlag
                        // if(!res.data.firstFlag){
                            if(self.productionTabActiveIndex == 1){
                                // document.getElementById('business-description-editor-text').value = res.data.businessIntroduction
                                // console.log(self.businessDescriptionEditorContent)
                                self.businessDescriptionEditorContent = res.data.businessIntroduction
                                // self.$nextTick(() => {
                                //     self.businessCatchData()
                                // })
                                // console.log(self.businessDescriptionEditorContent)
                                loading.close()
                            }else if(self.productionTabActiveIndex == 2){
                                self.dataIntroduction = []
                                for (let i = 0; i < res.data.dataSourceList.length; i++) {
                                    let dataSourceJson = {}
                                    dataSourceJson.dataName = res.data.dataSourceList[i].name
                                    dataSourceJson.dataNameSize = 50 - (res.data.dataSourceList[i].name.length)
                                    dataSourceJson.dataContent = res.data.dataSourceList[i].source
                                    dataSourceJson.dataContentSize = 500 - (res.data.dataSourceList[i].source.length)
                                    dataSourceJson.dataProject = res.data.dataSourceList[i].sample
                                    dataSourceJson.dataProjectSize = 1000 - (res.data.dataSourceList[i].sample.length)
                                    self.dataIntroduction.push(dataSourceJson)
                                }
                                self.dataSelectionEtiorContent = res.data.technicalSelection
                                // document.getElementById('data-selection-editor-text').value = res.data.technicalSelection
                                self.structureUrl = res.data.technicalPicNameList.length == 0 ? '' : res.data.technicalPicNameList[0].mappingFilePath
                                self.structureImgName[0]= res.data.technicalPicNameList.length == 0 ? '' : res.data.technicalPicNameList[0].fileName

                                self.appUrl = res.data.technicalStructurePicNameList.length == 0 ? '' : res.data.technicalStructurePicNameList[0].mappingFilePath
                                self.appImgName[0]= res.data.technicalStructurePicNameList.length == 0 ? '' : res.data.technicalStructurePicNameList[0].fileName

                                let appNameStatus = self.appDomains[0].appNameStatus
                                if(res.data.skillList.length > 0){
                                    self.appDomains = []
                                }
                                for (let i = 0; i < res.data.skillList.length; i++) {
                                    let skillListJson = {}
                                    self.appDomains.push({
                                            appNameStatus: [],
                                            appNameValue: '',
                                            appNamePointStatus: [],
                                            appNamePointValue: []
                                        })
                                    self.appDomains[i].appNameValue = res.data.skillList[i].application

                                    // self.appNamePointStatus[i]
                                    // skillListJson.appNameStatus = res.data.skillList[i].applicationStr
                                    // skillListJson.appNameValue = res.data.skillList[i].application
                                    // for( let j = 0; j < res.data.skillList[i].skillList.length; j++ ){
                                    //     let skillListDataJson = {}
                                    //     skillListDataJson.label = res.data.skillList[i].skillStrList[j]
                                    //     skillListDataJson.value = res.data.skillList[i].skillList[j]
                                    //     skillListJson.appNamePointStatus.push(skillListDataJson)
                                    // }
                                    // skillListJson.appNamePointStatus = res.data.skillList[i].skillStrList
                                    // skillListJson.appNamePointValue = res.data.skillList[i].skillList
                                    for (let j = 0; j < self.appDomainsData.length; j++) {
                                        let appNameJson = {}
                                        appNameJson.label = self.appDomainsData[j].name
                                        appNameJson.value = self.appDomainsData[j].id
                                        self.appDomains[i].appNameStatus.push(appNameJson)
                                    }
                                    for (let j = 0; j < self.appDomainsSkillData.length; j++) {
                                        if(self.appDomains[i].appNameValue == self.appDomainsSkillData[j].id){
                                            for (let e = 0; e < self.appDomainsSkillData[j].skillList.length; e++) {
                                                let appNamePointJson = {}
                                                appNamePointJson.label = self.appDomainsSkillData[j].skillList[e].name
                                                appNamePointJson.value = self.appDomainsSkillData[j].skillList[e].id
                                                self.appDomains[i].appNamePointStatus.push(appNamePointJson)
                                            }
                                        }
                                    }
                                    self.appDomains[i].appNamePointValue = res.data.skillList[i].skillList
                                    // skillListJson.appNamePointValue = res.data.skillList[i].skillList
                                    // self.appDomains.push(skillListJson)
                                }
                                // self.$nextTick(() => {
                                //     self.dataSelectionCatchData()
                                // })
                                loading.close()
                            }else if(self.productionTabActiveIndex == 3){
                                // document.getElementById('model-introduction-editor-text').value = res.data.modelIntroduction
                                self.modelIntroductionrContent = res.data.modelIntroduction
                                // self.$nextTick(() => {
                                //     self.flowDesignCatchData()
                                // })
                                // document.getElementById('flow-design-editor-text').value = res.data.designDescription
                                self.flowDesignEtiorContent = res.data.designDescription
                                // self.$nextTick(() => {
                                //     self.modelIntroductionCatchData()
                                // })
                                if(res.data.stepList.length > 0){
                                    self.flowDomains = []
                                }
                                for (let i = 0; i < res.data.stepList.length; i++) {
                                    let flowDomainJson = {}
                                    flowDomainJson.id = res.data.stepList[i].id
                                    flowDomainJson.flowTextarea = res.data.stepList[i].name
                                    flowDomainJson.flowTextareaNumber = 50 - (res.data.stepList[i].name.length)
                                    self.flowDomains.push(flowDomainJson)
                                }
                                loading.close()
                            }else if(self.productionTabActiveIndex == 4){
                                self.characterDurationEtiorContent = res.data.roleTask
                                // document.getElementById('character-duration-editor-text').value = res.data.roleTask
                                self.fileList = []
                                for (let i = 0; i < res.data.resultDisplayPicNameList.length; i++) {
                                    let picNameJson = {}
                                    picNameJson.name = res.data.resultDisplayPicNameList[i].fileName
                                    picNameJson.url = res.data.resultDisplayPicNameList[i].mappingFilePath
                                    self.fileList.push(picNameJson)
                                }
                                // self.$nextTick(() => {
                                //     self.characterDurationCatchData()
                                // })
                                loading.close()
                            }
                        // }
                    }else if(res.code == '401'){
                        loading.close()
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                })
            },
            //业务说明
            businessCatchData(){
                this.businessEditor = new E('#business-description-editor-menu', '#business-description-editor-editor')
                this.businessEditor.customConfig.onchange = (html) => {
                    this.businessDescriptionEditorContent = html
                }
                this.businessEditor.customConfig.zIndex = 100
                this.businessEditor.customConfig.uploadImgShowBase64 = true
                this.businessEditor.customConfig.menus = this.editorMenus
                this.businessEditor.create()     // 创建富文本实例
                this.businessEditor.txt.html(this.businessDescriptionEditorContent)
            },
            //技术选型
            dataSelectionCatchData(){
                this.dataSelectionEditor = new E('#data-selection-editor-menu', '#data-selection-editor-editor')
                this.dataSelectionEditor.customConfig.onchange = (html) => {
                    this.dataSelectionEtiorContent = html
                }
                this.dataSelectionEditor.customConfig.zIndex = 100
                this.dataSelectionEditor.customConfig.uploadImgShowBase64 = true
                this.dataSelectionEditor.customConfig.menus = this.editorMenus
                this.dataSelectionEditor.create()     // 创建富文本实例
                this.dataSelectionEditor.txt.html(this.dataSelectionEtiorContent)
            },
            //模型介绍
            modelIntroductionCatchData(){
                this.modelIntroductionrEditor = new E('#model-introduction-editor-menu', '#model-introduction-editor-editor')
                this.modelIntroductionrEditor.customConfig.onchange = (html) => {
                    this.modelIntroductionrContent = html
                }
                this.modelIntroductionrEditor.customConfig.zIndex = 100
                this.modelIntroductionrEditor.customConfig.uploadImgShowBase64 = true
                this.modelIntroductionrEditor.customConfig.menus = this.editorMenus
                this.modelIntroductionrEditor.create()     // 创建富文本实例
                this.modelIntroductionrEditor.txt.html(this.modelIntroductionrContent)
            },
            //流程设计
            flowDesignCatchData(){
                this.flowDesignEditor = new E('#flow-design-editor-menu', '#flow-design-editor-editor')
                this.flowDesignEditor.customConfig.onchange = (html) => {
                    this.flowDesignEtiorContent = html
                }
                this.flowDesignEditor.customConfig.zIndex = 100
                this.flowDesignEditor.customConfig.uploadImgShowBase64 = true
                this.flowDesignEditor.customConfig.menus = this.editorMenus
                this.flowDesignEditor.create()     // 创建富文本实例
                this.flowDesignEditor.txt.html(this.flowDesignEtiorContent)
            },
            //角色工期
            characterDurationCatchData(){
                this.characterDurationEtior = new E('#character-duration-editor-menu', '#character-duration-editor-editor')
                this.characterDurationEtior.customConfig.onchange = (html) => {
                    this.characterDurationEtiorContent = html
                }
                this.characterDurationEtior.customConfig.zIndex = 100
                this.characterDurationEtior.customConfig.uploadImgShowBase64 = true
                this.characterDurationEtior.customConfig.menus = this.editorMenus
                this.characterDurationEtior.create()     // 创建富文本实例
                this.characterDurationEtior.txt.html(this.characterDurationEtiorContent)
            },
            openBox: function(e) {
                this.currentPic.imgUrl = e
                this.lightBoxToggle = !this.lightBoxToggle;
            },
            closeBox: function() {
                this.lightBoxToggle = false;
            },
            //tab切换
            productionTab(value){
                this.productionTabActiveIndex = value
                this.init()
            },
            //初始化技术应用列表
            selectInit(){
                let self = this
                self.$http.get('/dataplatform/description/skillApplication').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.applicationData.length; i++) {
                            let appNameJson = {}
                            appNameJson.value = res.data.applicationData[i].id
                            appNameJson.label = res.data.applicationData[i].name
                            for (let j = 0; j < self.appDomains.length; j++) {
                                self.appDomains[j].appNameStatus.push(appNameJson)
                            }
                        }
                        self.appDomainsData = res.data.applicationData
                        self.appDomainsSkillData = res.data.skillData
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            initStepSelect(){
                let self = this, dataUrl
                self.form.mirrorStatus = []
                self.form.mirrorValue = ''
                self.form.masterMirrorStatus = []
                self.form.masterMirrorValue = ''
                self.form.virtualStatus = []
                self.form.virtualValue = ''
                self.form.masterVirtualStatus = []
                self.form.masterVirtualValue = ''
                self.form.formDomains = [
                    {
                        formMirrorStatus: [],
                        formMirrorValue: '',
                        formVirtualStatus: [],
                        formVirtualValue: ''
                    },
                    {
                        formMirrorStatus: [],
                        formMirrorValue: '',
                        formVirtualStatus: [],
                        formVirtualValue: ''
                    },
                    {
                        formMirrorStatus: [],
                        formMirrorValue: '',
                        formVirtualStatus: [],
                        formVirtualValue: ''
                    },
                    {
                        formMirrorStatus: [],
                        formMirrorValue: '',
                        formVirtualStatus: [],
                        formVirtualValue: ''
                    },
                    {
                        formMirrorStatus: [],
                        formMirrorValue: '',
                        formVirtualStatus: [],
                        formVirtualValue: ''
                    },
                    {
                        formMirrorStatus: [],
                        formMirrorValue: '',
                        formVirtualStatus: [],
                        formVirtualValue: ''
                    }
                ]
                // if(self.form.radioType == 0){
                //     dataUrl = '/dataplatform/manage/vmConfig/vmConfigDropDownList?isInitial='+self.form.radioSource
                // }else{
                //     dataUrl = '/dataplatform/manage/vmConfig/vmConfigDropDownList'
                // }
                var radioType = self.form.radioType == 0 ? 1 : 2
                dataUrl = '/dataplatform/manage/vmConfig/vmConfigDropDownList?isInitial='+self.form.radioSource+'&mode='+radioType
                self.$http.get(dataUrl).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //镜像
                        for(let i = 0; i < res.data.imageDropDownList.length; i++){
                            let mirrorJson = {}
                            mirrorJson.label = res.data.imageDropDownList[i].value
                            mirrorJson.value = res.data.imageDropDownList[i].key
                            self.form.mirrorStatus.push(mirrorJson)         //单节点镜像
                            self.form.masterMirrorStatus.push(mirrorJson)   //主节点镜像
                            for (let j = 0; j < self.form.formDomains.length; j++) {
                                self.form.formDomains[j].formMirrorStatus.push(mirrorJson)
                            }
                        }
                        //虚机
                        for(let i = 0; i < res.data.hostDropDownList.length; i++){
                            let virtuaJson = {}
                            virtuaJson.label = res.data.hostDropDownList[i].value
                            virtuaJson.value = res.data.hostDropDownList[i].key
                            self.form.virtualStatus.push(virtuaJson)        //单节点虚机
                            self.form.masterVirtualStatus.push(virtuaJson)  //主节点虚机
                            for (let j = 0; j < self.form.formDomains.length; j++) {
                                self.form.formDomains[j].formVirtualStatus.push(virtuaJson)
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化案例目标弹窗
            initTarget(){
                let self = this
                self.$http.get('/dataplatform/chapter/custom/getTarget?itemId='+ self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.addTargetValue = res.data
                        self.addTargetNumber = 500 - (res.data.length)
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //数据源码添加
            dataAddFn(){
                this.dataIntroduction.push({
                    dataName: '',
                    dataNameSize: 50,
                    dataContent: '',
                    dataContentSize: 500,
                    dataProject: '',
                    dataProjectSize: 1000,
                })
            },
            //数据源码删除
            dataRemoveFn(item){
                var index = this.dataIntroduction.indexOf(item)
                if (index !== -1) {
                    this.dataIntroduction.splice(index, 1)
                }
            },
            //数据源码名称字数限制
            dataNameInput(item){
                var index = this.dataIntroduction.indexOf(item)
                var txtVal = this.dataIntroduction[index].dataName.length;
                this.dataIntroduction[index].dataNameSize = 50 - txtVal
            },
            //数据源码数据来源字数限制
            dataContentInput(item){
                var index = this.dataIntroduction.indexOf(item)
                var txtVal = this.dataIntroduction[index].dataContent.length;
                this.dataIntroduction[index].dataContentSize = 500 - txtVal
            },
            dataProjectInput(item){
                var index = this.dataIntroduction.indexOf(item)
                var txtVal = this.dataIntroduction[index].dataProject.length;
                this.dataIntroduction[index].dataProjectSize = 1000 - txtVal
            },
            //技术应用添加
            appAddDomains(){
                this.appDomains.push({
                    appNameStatus: this.appDomains[0].appNameStatus,
                    appNameValue: '',
                    appNamePointStatus: [],
                    appNamePointValue: []
                })
            },
            //技术应用删除
            appRemoveDomains(item) {
                var index = this.appDomains.indexOf(item)
                if (index !== -1) {
                    this.appDomains.splice(index, 1)
                }
            },
            //技术应用change
            appNameChange(item){
                var index = this.appDomains.indexOf(item)
                for (let i = 0; i < this.appDomainsSkillData.length; i++) {
                    if(this.appDomains[index].appNameValue == this.appDomainsSkillData[i].id){
                        this.appDomains[index].appNamePointStatus = []
                        this.appDomains[index].appNamePointValue = []
                        for (let j = 0; j < this.appDomainsSkillData[i].skillList.length; j++) {
                            let appNamePointJson = {}
                            appNamePointJson.label = this.appDomainsSkillData[i].skillList[j].name
                            appNamePointJson.value = this.appDomainsSkillData[i].skillList[j].id
                            this.appDomains[index].appNamePointStatus.push(appNamePointJson)
                        }
                    }
                }
            },
            //流程字数限制
            flowInput(item){
                var index = this.flowDomains.indexOf(item)
                var txtVal = this.flowDomains[index].flowTextarea.length;
                this.flowDomains[index].flowTextareaNumber = 50 - txtVal
            },
            //流程添加
            flowAddDomains(){
                this.flowDomains.push({
                    id: 0,
                    flowTextarea: '',
                    flowTextareaNumber: 50
                })
            },
            //流程删除
            flowRemoveDomains(item){
                var index = this.flowDomains.indexOf(item)
                if (index !== -1) {
                    this.flowDomains.splice(index, 1)
                }
            },
            //保存
            saveFn() {
                let self = this
                let data = {}

                if(self.productionTabActiveIndex == 1){
                    let businessDescriptionEditorText = document.getElementById('business-description-editor-text').value
                    data = {
                        businessIntroduction: businessDescriptionEditorText,
                        itemId: self.projectId,
                        descriptionType: 1
                    }
                }else if(self.productionTabActiveIndex == 2){
                    //数据源
                    let dataSourceList = []
                    for(let i = 0; i < self.dataIntroduction.length; i++){
                        let dataSourceJson = {}
                        dataSourceJson.name = self.dataIntroduction[i].dataName
                        dataSourceJson.source = self.dataIntroduction[i].dataContent
                        dataSourceJson.sample = self.dataIntroduction[i].dataProject
                        dataSourceList.push(dataSourceJson)
                    }
                    //技术应用
                    let skillList = []
                    for(let i = 0; i < self.appDomains.length; i++){
                        let skillListJson = {}
                        skillListJson.application = self.appDomains[i].appNameValue
                        skillListJson.skillList = self.appDomains[i].appNamePointValue
                        skillList.push(skillListJson)
                    }
                    let dataSelectionEditorText = document.getElementById('data-selection-editor-text').value
                    data = {
                        dataSourceList: dataSourceList,
                        technicalSelection: dataSelectionEditorText,
                        itemId: self.projectId,
                        descriptionType: 2,
                        skillList: skillList,
                        technicalPicNames: self.structureImgName,
                        technicalStructurePicNames: self.appImgName
                    }
                }else if(self.productionTabActiveIndex == 3){
                    //流程展示
                    let stepIdNames = []
                    for(let i = 0; i < self.flowDomains.length; i++){
                        let stepIdNamesJson = {}
                        stepIdNamesJson.id = self.flowDomains[i].id
                        stepIdNamesJson.name = self.flowDomains[i].flowTextarea
                        stepIdNames.push(stepIdNamesJson)
                    }

                    let modelIntroductionEditorText = document.getElementById('model-introduction-editor-text').value
                    let flowDesignEditorText = document.getElementById('flow-design-editor-text').value
                    data = {
                        itemId: self.projectId,
                        descriptionType: 3,
                        designDescription: flowDesignEditorText,
                        modelIntroduction: modelIntroductionEditorText,
                        stepIdNames: stepIdNames
                    }

                }else if(self.productionTabActiveIndex == 4){
                    let fileNameList = []
                    for(let i = 0; i < self.fileList.length; i++){
                        fileNameList.push(self.fileList[i].name)
                    }
                    let characterDurationEditorText = document.getElementById('character-duration-editor-text').value
                    data = {
                        itemId: self.projectId,
                        descriptionType: 4,
                        resultDisplayPicNames: fileNameList,
                        roleTask: characterDurationEditorText
                    }
                }
                self.$http.post('/dataplatform/description/update',data).then(response => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.init()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //跳转step获取章节ID
            goStep(){
                let self = this
                if(self.vmTemplateFlag){
                    self.dialogFormVisible = true

                }else{
                    self.$router.push({
                        path: '/teacher/projectTrainingStep'
                    })
                }
            },
            //案例目标
            projectTargetFn(){

            },
            //技术结构图
            upLoadImg($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType !== 'jpeg' && fileType !== 'jpg' && fileType !== 'png' && fileType !== 'bmp'){
                    self.$message.error('上传图片格式只能是 jpg,png,jpeg,bmp 格式!')
                    return
                }
                let fd = new FormData()
                    fd.append('files', $event.target.files[0])
                self.structureLoading = true
                self.$http.post('/dataplatform/common/upload/file',fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        self.structureLoading = false
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.structureUrl = res.data[0].mappingFilePath
                        self.structureImgName[0] = res.data[0].fileName
                    }else if(res.code == '401'){
                        self.structureLoading = false
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.structureLoading = false
                        self.$message.error(res.message)
                    }
                })
            },
            //技术结构图
            appUpLoadImg($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType !== 'jpeg' && fileType !== 'jpg' && fileType !== 'png' && fileType !== 'bmp'){
                    self.$message.error('上传图片格式只能是 jpg,png,jpeg,bmp 格式!')
                    return
                }
                let fd = new FormData()
                    fd.append('files', $event.target.files[0])
                self.appLoading = true
                self.$http.post('/dataplatform/common/upload/file',fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        self.appLoading = false
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.appUrl = res.data[0].mappingFilePath
                        self.appImgName[0] = res.data[0].fileName
                    }else if(res.code == '401'){
                        self.appLoading = false
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.appLoading = false
                        self.$message.error(res.message)
                    }
                })
            },
            //技术结构图删除
            structureDelete(){
                let self = this
                self.$confirm('是否删除技术结构图?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.structureUrl = ''
                    self.structureImgName = []
                    $('#structure').val('')
                    self.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                })
            },
            //技术应用图删除
            appDelete(){
                let self = this
                self.$confirm('是否删除技术应用图?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.appUrl = ''
                    self.appImgName = []
                    $('#appUrl').val('')
                    self.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                })
            },
            //图片上传
            changeUpload(file, fileList) {
                this.fileList = fileList
            },
            // 图片长传-之前
            beforeAvatarUpload(file,fileList) {
                let self = this
                if(file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png' && file.type !== 'image/bmp'){
                    self.$message.error('上传图片格式只能是 jpg,png,jpeg,bmp 格式!')
                    return false
                }
                let fd = new FormData()
                    fd.append('files', file)
                    fd.append('width', 1000)
                    fd.append('high', 600)
                self.$http.post('/dataplatform/common/upload/file',fd).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.fileNameList = []
                        for(let i = 0; i < res.data.length; i++){
                            let fileJson = {}
                            let fileNameJson = {}
                            fileJson.name = res.data[i].fileName
                            fileJson.url = res.data[i].mappingFilePath
                            self.fileList.push(fileJson)
                            self.fileNameList.push(res.data[i].fileName)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            handleRemove(file, fileList) {
                this.fileList = fileList
            },
            //弹窗step切换
            addClass:function(index){
                this.form.virtualStepCurrent = index
            },
            //步骤制作表单提交
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}
                        if(self.form.radioType == 0){
                            data = {
                                projectId: self.projectId,
                                isCluster: self.form.radioType,
                                isInitial: self.form.radioSource,
                                mainImageId: self.form.mirrorValue,
                                mainHostId: self.form.virtualValue
                            }
                        }else if(self.form.radioType == 1){
                            let cluterArr = []
                            let formDomains = self.form.formDomains.slice(0,self.form.virtualStepCurrent)
                            for(let i = 0; i < formDomains.length; i++){
                                let clusterJson = {}
                                clusterJson.imageId = formDomains[i].formMirrorValue
                                clusterJson.hostId = formDomains[i].formVirtualValue
                                cluterArr.push(clusterJson)
                            }
                            data = {
                                projectId: self.projectId,
                                isCluster: self.form.radioType,
                                mainImageId: self.form.masterMirrorValue,
                                mainHostId: self.form.masterVirtualValue,
                                cluster: cluterArr
                            }
                        }
                        self.$http.post('/dataplatform/manage/vmConfig/saveConfig',data).then((response) => {
                            let res = response.data
                            if(res.code == '200'){
                                self.dialogFormVisible = false
                                self.$refs[formName].resetFields()
                                self.$router.push({
                                    path: '/teacher/projectTrainingStep',
                                    query:{tab:1}
                                })
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //添加案例目标
            projectTargetFn(){
                this.projectTargetVisible = true
            },
            addTargetInput(){
                var txtVal = this.addTargetValue.length;
                this.addTargetNumber = 500 - txtVal
            },
            //添加目标保存
            addTargetSave(){
                let self = this
                self.$http.post('/dataplatform/chapter/custom/updateTarget',{
                    itemId: self.projectId,
                    target: self.addTargetValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        self.projectTargetVisible = false
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //开始试验缩小
            startExperimentZomm(){
                if(this.productionTipStatus){
                    this.productionTipStatus = false
                }else{
                    this.productionTipStatus = true
                }
            },
            //开始实训
            startExperiment(){
                let self = this
                // 新增修改test 20190910
                if(self.vmTemplateFlag){
                    self.dialogFormVisible = true
                    self.initStepSelect()

                }else{
                    self.$router.push({
                        path: '/teacher/projectTrainingStep',
                        query:{tab:1}
                    })
                }
            }
        }
    }
</script>
<style scoped>

    /* @import './../../api/trumbowyg/trumbowyg.css'; */
</style>

